<template>
  <div>
    <div>
      <a-form-item label='产品主图' v-bind="formItemLayout">
        <a-upload
          :action="actionUrl"
          listType="picture-card"
          :fileList="fileListMmab"
          @preview="handlePreviewM"
          @change="handleChangeM"
          :headers="headers">
          <div v-if="fileListMmab.length < 1">
            <a-icon type="plus"/>
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
        <a-modal :visible="previewVisibleM" :footer="null" @cancel="handleCancelM">
          <img alt="example" style="width: 100%" :src="previewImageM"/>
        </a-modal>
      </a-form-item>
    </div>
  </div>
</template>

<script>
import db from '../../../../utils/localstorage'
import GlobalVariable from '../../../common/global_variable'
const formItemLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 18}
}
let user = db.get('USER')
let username = user.username
export default {
  name: 'Img',
  data () {
    return {
      mab04: this.mab4 || '',
      actionUrl: GlobalVariable.preRequest + 'file/uploadQCloud',
      formItemLayout,
      thumbUrlM: '',
      headers: {
        Authentication: db.get('USER_TOKEN')
      },
      fileKeyStr: '',
      // 主图初始化
      previewVisibleM: false,
      previewImageM: '',
      fileListMmab: []
      // 主图初始化结束
    }
  },
  props: ['mab4', 'fileListM'],
  watch: {
    mab4 (val) {
      this.mab04 = val
    },
    mab04 (val) {
      console.log(val)
      this.$emit('update:mab4', val)
    },
    'fileListMmab' (val) {
      this.$emit('update:fileListM', val)
    }
  },
  methods: {
    // 主图上传相关开始
    handleCancelM () {
      this.previewVisibleM = false
    },
    handlePreviewM () {
      this.previewImageM = this.thumbUrlM
      this.previewVisibleM = true
    },
    // 产品主图
    handleChangeM (info) {
      this.fileListMmab = info.fileList
      const file = info.file
      this.fileKeyMmab = file.name
      let code = ''
      if (file.hasOwnProperty('response')) {
        code = file.response.code
      }
      this.fileKeyMmab = (this.fileKeyMmab.indexOf('/' + username + '/') !== -1 ? (file.name) : ('/' + username + '/' + file.name))
      if (file.status === 'removed') {
        // 20002图片已存在 20001系统异常
        if (code === 20002 || code === 20001) {
        } else {
          this.$api.goods.deleteFile(this.fileKeyMmab).then((r) => {
            this.fileKeyStr = this.fileKeyStr.replace((this.fileKeyMmab + ','), '')
            this.fileKeyMmab = this.fileKeyStr
          })
        }
      } else if (file.status === 'done' && code === 20002) {
        console.log(this.fileListMmab.indexOf(file))
        this.fileListMmab.splice(this.fileListMmab.indexOf(file), 1)
        this.$message.error('文件已存在,请更换后再试')
      } else if (file.status === 'done' && code === 20001) {
        this.fileListMmab.splice(this.fileListMmab.indexOf(file), 1)
        this.$message.error('系统繁忙,请稍后再试')
      } else if (file.status === 'done' && code === 200) {
        this.mab04 = this.fileKeyMmab
        this.fileKeyStr = this.fileKeyStr + this.fileKeyMmab + ','
        this.fileKeyMmab = this.fileKeyStr
        this.thumbUrlM = 'https://mtt2019-1259412925.cos.ap-shanghai.myqcloud.com' + this.fileKeyMmab
      }
    }
    // 主图上传相关结束
  }
}
</script>

<style lang="less" scoped>

</style>
